<template>
    <div class="my-dialog">
        <el-dialog v-model="dialogVisible" :title="dialogForm.title" :width="dialogForm.width">
            <div class="box">
                <div class="item" :class="activeNum == 1 ? 'item-active' : ''" @click="handleItem(1)">10元</div>
                <div class="item" :class="activeNum == 2 ? 'item-active' : ''" @click="handleItem(2)">20元</div>
                <div class="item" :class="activeNum == 3 ? 'item-active' : ''" @click="handleItem(3)">30元</div>
                <div class="item" :class="activeNum == 4 ? 'item-active' : ''" @click="handleItem(4)">40元</div>
                <div class="item" :class="activeNum == 5 ? 'item-active' : ''" @click="handleItem(5)">50元</div>
                <div v-if="!showInput" class="item" :class="activeNum == 6 ? 'item-active' : ''" @click="handleItem(6)">
                    自定义</div>
                <div v-else class="item" :class="activeNum == 6 ? 'item-active' : ''" @click="handleItem(6)">
                    <el-input-number style="width: 80%;" v-model="input" :precision="2" :step="0.1" :max="99" />
                </div>

            </div>
            <div class="btn-box">
                <el-button @click="resetForm()" :loading="loading">取消</el-button>
                <el-button type="primary" @click="submitForm()" :loading="loading">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { store } from '@/store'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch, computed } from 'vue'
import { rewardApi } from '../api/dangerApi'
const dialogVisible = ref<boolean>(false) //弹窗是否出现
const formLabelWidth = '140px'
const dialogForm = {
    width: '30%',
    title: '奖励',
}
//监听加载
const loading = computed(() => {
    return store.getters['loading/getLoad']
})
const emit = defineEmits(['onCancel'])

interface PropsDialog {
    isShowDialog: boolean //弹窗是否出现
    dialogData?: any
    isBack?: boolean // 详情页调用

}
const props = withDefaults(defineProps<PropsDialog>(), {
    isShowDialog: false,
    isBack: false

})

//监控弹窗是否出现
watch(
    () => props.isShowDialog,
    () => {
        dialogVisible.value = !dialogVisible.value
    }
)

const showInput = ref(false)
const activeNum = ref(1)
const input = ref(0)
const handleItem = (val) => {

    activeNum.value = val
    if (val == 6) {
        showInput.value = true
    } else {
        showInput.value = false

    }
}
const resetForm = () => {

    dialogVisible.value = !dialogVisible.value
}

const submitForm = async () => {
    if (showInput.value && !input.value) {
        return ElMessage.error('请填写金额!')
    }
    let num = 0

    if (activeNum.value == 1) {
        num = 10
    } else if (activeNum.value == 2) {
        num = 20
    } else if (activeNum.value == 3) {
        num = 30
    } else if (activeNum.value == 4) {
        num = 40
    } else if (activeNum.value == 5) {
        num = 50
    } else if (activeNum.value == 6) {
        num = input.value
    }
    let params = {
        id: props.dialogData,
        rewardMoney: num
    }
    rewardApi(params).then((res) => {
        if (res.code == 0) {
            ElMessage.success('已奖励!')
            dialogVisible.value = !dialogVisible.value
            setTimeout(() => {
                console.log('shuaxin')
                //刷新表格
                store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])
                if (props.isBack) {
                    emit('onCancel')
                }
            }, 1000);
        } else {
            store.commit('loading/setLoad', false)
        }
    })
}
</script>
<style scoped lang="scss">
.btn-box {
    text-align: right;
}

.box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
        margin-bottom: 20px;
        width: 30%;
        height: 60px;
        border: 1px solid #ccc;
        border-radius: 16px;

        display: flex;
        align-items: center;
        justify-content: center;


    }

    .item-active {
        border-color: rgba(15, 83, 172, 1);
        color: rgba(15, 83, 172, 1);
    }
}
</style>
